main {
    margin-top: 150px;
    width: 400px;
    height: 400px;
    border: 1px solid #ffffff;
}
.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    animation-name: myTranslate, myBackgroundColor, myBorderRadius;
    /*animation-delay: 1s;*/
    animation-duration: 4s, 4s;
}
@keyframes myTranslate {
    25% {
        transform: translateX(300px);
    }
    50% {
        transform: translate(300px, 300px);

    }
    75% {
        transform: translateY(300px);
    }
}
@keyframes myBackgroundColor {
    25% {
        background-color: red;
        transform: translateX(300px);
    }
    50% {
        background-color: aquamarine;
    }
    75% {
        background-color: blue;
    }
    /*100% {*/
    /*    transform: translate(300px, 300px);*/
    /*}*/
}

@keyframes myBorderRadius {
    25% {
        border-radius: 50%;
    }
    50% {
        border-radius: 20%;
    }
    75% {
        border-radius: 50%;
    }
}
